<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!--
  1. 列表显示
    数组: v-for / index
    对象: v-for / key
  2. 列表的更新显示
    删除item
    替换item
  -->
  <div id="app">
    <h2>TEST: -for number</h2>
    <ul>
      <li v-for="(person, index) in persons" :key="person.id">
        {{person.id}}---{{person.name}}---{{person.age}}
        ---<button @click="deleteP(index)">删除</button>
        ---<button @click="updateP(index,{id:Date.now(),name:'json',age:17})">更新</button>
      </li>
    </ul>

    <h2>Test:v-for object</h2>
    <ul>
      <li v-for="(value, key) in persons[1]" :key="key">
        {{key}}:{{value}}
      </li>
    </ul>
  </div>
  <script type="text/javascript" src="/js/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#app',
      data:{
        persons:[
          {id:1,name:'Tom',age:13},
          {id:2,name:'Jerry',age:16},
          {id:3,name:'Jack',age:14},
          {id:4,name:'Catalina',age:15},
          {id:5,name:'Movaja',age:17},
        ]
      },
      methods: {
        deleteP(index){
          this.persons.splice(index,1)//splice()不是原生的方法,是vue重写后的方法
        },
        updateP(index,newP){
          this.persons.splice(index,1,newP)
        }
      },
    })
  </script>
</body>
</html>